<template>
      <div class="register">
    <div id="header">
      <div class="header_title">
        <span class="title_con" >SQL学习系统</span>
      </div>
    </div>
  
    <div id="content">
      <center>
        <div class="con">
        <div class="con_title">
          <span class="con_title_sp">密码重置</span>
        </div>
        <form class="con_panel" @submit.prevent="resetPwd">
          <div class="con_input">
            <span>用&nbsp;户&nbsp;名：&nbsp;</span>
            <input type="text" id="username" v-model="username" placeholder="请输入用户名" required/>
          </div>
          <div class="con_input">
            <span>手&nbsp;机&nbsp;号：&nbsp;</span>
            <input type="phone" id="phone" v-model="phone" placeholder="请输入手机号" required/>
          </div>
          <div class="con_input">
            <span>密码重置：</span>
            <input type="password" id="password" v-model="password" placeholder="请输入密码" required/>
          </div>
          <div class="con_input">
            <span>确认重置：</span>
            <input type="password" id="confirmedPassword" v-model="confirmedPassword" placeholder="请确认密码" required/>
          </div>
          <div class="con_select">
            <input type="radio" name="role" v-model="roleId" value="2" />&nbsp;学生
            <span>&nbsp;&nbsp;</span>
            <input type="radio" name="role" v-model="roleId" value="1" />&nbsp;教师
          </div>
          <div class="error-message">{{ error_message }}</div>
          <button type="submit" value="重置" class="submit-btn">重置</button>
        </form>
      </div>
      </center>
    </div>
   
  </div>  
</template>



<script>

    import {ref} from 'vue';
    import router from "@/router/index";
    import $ from 'jquery';

    export default{
        name : "ResetPasswordView",
        components:{},
        setup(){
        
        let username = ref('');
        let phone = ref('');
        let password = ref('');
        let confirmedPassword = ref('');
        let roleId = ref('');
        let error_message = ref('');

        const resetPwd = () => {


          $.ajax({   //注册新账号
                url: "http://localhost:8090/sls/account/resetPassword",
                type: "post",
                data: { 
                      username: username.value,
                      phone: phone.value,
                      password: password.value,
                      confirmedPassword: confirmedPassword.value, 
                      roleId: roleId.value,
                },
                success(resp){
                  //console.log(resp);
                  if(resp.error_message === "success"){
                    router.push({name : "login"});  //注册成功,跳转到登录页面
                  }else{
                    error_message.value = resp.error_message;
                  }
                }
           });
        }
          return {
            username,
            phone,
            password,
            confirmedPassword,
            roleId ,
            error_message,
            resetPwd,
          }
      }
    }

    

</script>



<style scoped>
body{
  padding: 0px;
  margin: 0px;
}
a{
  text-decoration: none;
}
.register{
  box-sizing: border-box;
  background-image: url("@/assets/img/bg2.jpg");
  background-size: cover;
}

#header{
  width: auto;
  min-height: 70px;
  line-height: 70px;
}
/* #header{
  border-bottom: medium solid #fff; 
} */
span.title_con{
  display: block;
  text-align:center;
  font-style: normal;
  font-size: 2em;
  font-weight:800 ;
  color: #000;
}
#content{
  width: auto;
  height:28em;
  text-align: center;
}
#footer{
  width: auto;
  min-height: 60px;
  line-height:60px;
}
#footer{
  border-top: thin solid #39A631;
}
.con{
  width: 35%;
  height: 24em;
  background-color: #D4E1F2;
  margin-top:1em;
}
.con{
  /* box-sizing: border-box; */
  border: 10px solid #84AAD7;
  border-radius: 5px;
}
.con_title{
  box-sizing: border-box;
  background-color: #8272c1;
  width: auto;
  height: 3.5em;
  line-height: 3.5em;
  text-align: center;
}
.con_title_sp{
  font-size: 1.5em;
  font-weight: 800;
  color: #FFF;
}
.con_input{
  margin: 0.5em 0 0.5em 0;
}
.submit-btn{
  width: 8em;
  height: 2em;
  background-color: #62ab00;
  border-radius: 4px;
  border: 0px;
  color: #fff;

  font-size: 1em;
  font-weight: bold;
}
.con_input span{
  font-size: 1em;
  font-weight: bold;
  color: #333;
}
.con_input input{
  width: 15em;padding: 0.5em 1em;
  border: 1px solid #bbb;
}
.submit-btn{
  margin: 1em 0 1em 0;
}
.con_select{
  /* margin-left: 2em; */
  font-size: 1em;
  color: #333;
  }
  .error-message{
    color:red;
  }
</style>